<template>
  <div class="content_box">
    <div class="main-box">
      <p class="main-title">修改办案预留银行卡</p>
      <p class="main-text">注：当事人信息一旦修改不可修改，日期请与文书一致后续可案件延期申请。</p>
      <el-form :model="form" :rules="rules" ref="updateForms">
        <el-form-item label="与本人关系" label-width="110px" prop="relationships_id">
          <el-select
            v-model="form.relationships_id"
            placeholder="请选择与本人关系"
            size="large"
            style="width: 90%"
          >
            <el-option
              v-for="item in list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item label="姓名" label-width="110px" prop="card_name">
          <el-input
            size="large"
            style="width: 90%"
            v-model="form.card_name"
            type="text"
            placeholder="请输入姓名"
          />
        </el-form-item>

        <el-form-item label="身份证号码" label-width="110px" prop="card_idcard">
          <el-input
            size="large"
            style="width: 90%"
            v-model="form.card_idcard"
            type="text"
            placeholder="请输入身份证号码"
          />
        </el-form-item>

        <el-form-item label="开户行名称" label-width="110px" prop="bank_name">
          <el-input
            size="large"
            style="width: 90%"
            v-model="form.bank_name"
            type="text"
            placeholder="请输入开户行名称"
          />
        </el-form-item>

        <el-form-item label="银行账号" label-width="110px" prop="card_number">
          <el-input
            size="large"
            style="width: 90%"
            v-model="form.card_number"
            type="text"
            placeholder="请输入银行账号"
          />
        </el-form-item>

        <el-form-item label="手机号" label-width="110px" prop="card_mobile">
          <el-input
            size="large"
            style="width: 90%"
            v-model="form.card_mobile"
            type="text"
            placeholder="请输入手机号"
          />
        </el-form-item>

        <el-form-item label="备注" label-width="110px">
          <el-input
            style="width: 90%"
            v-model="form.notes"
            type="textarea"
            placeholder="请输入备注，文字不可超过500字"
          />
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button
          :loading="loading"
          :disabled="loading"
          type="primary"
          @click="submit"
        >
          提交
        </el-button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref,defineProps, defineEmits,onMounted } from "vue";
import { ElNotification } from "element-plus";
import { saveBailBank } from "@/api/bond/pay";
import { getPublic } from "@/api/public";

const props = defineProps({
  bailId: {
    type: Number,
  },
  id: {
    type: Number,
  },
});

let form = ref({
  process_id: props.id,
  bail_id:props.bailId,
  relationships_id:'',
  card_name:'',
  card_idcard:'',
  card_mobile:'',
  card_number:'',
  bank_name:'',
  notes:''
});

const emit = defineEmits(['closeDrawer']);

onMounted(() => {
  getPublicSource()
});

// 获取公共数据
let list = ref([])
const getPublicSource = async()=>{
  await getPublic().then(res=>{
    if(res.code == 1){
      list.value = res.data.relationships
    }
  })
}


/*=====提交=====*/
const updateForms = ref();
let loading = ref(false);
const rules = reactive({
  relationships_id: [
    { required: true, message: "请选择与本人关系", trigger: "change" },
  ],
  card_name: [
    { required: true, message: "请输入姓名", trigger: "blur" },
  ],
  card_idcard: [
    { required: true, message: "请输入身份证号码", trigger: "blur" },
  ],
  bank_name: [
    { required: true, message: "请输入开户行名称", trigger: "blur" },
  ],
  card_number: [
    { required: true, message: "请输入银行账号", trigger: "blur" },
  ],
  card_mobile: [
    { required: true, message: "请输入手机号", trigger: "blur" },
  ],
});

const submit = async () => {
  await updateForms.value.validate();
  loading.value = true;
  console.log(form.value);
  await saveBailBank(form.value).then((res) => {
    if (res.code == 1) {
      ElNotification({ message: res.msg, type: "success" });
      close()
    } else {
      loading.value = false;
      ElNotification.error(res.msg);
    }
  });
};

// 关闭
const close=()=>{
  form.value.relationships_id = ''
  form.value.card_name = ''
  form.value.card_idcard = ''
  form.value.card_mobile = ''
  form.value.card_number = ''
  form.value.bank_name = ''
  form.value.notes = ''
  loading.value = false
  setTimeout(() => {
    updateForms.value.clearValidate();
  }, 500);
  
  emit("closeDrawer");
}
</script>
<style scoped lang="scss">
.dialog-footer {
  margin-top:50px;
  text-align: center;
}
.main-box{
  min-height: auto;
}
.main-text{
  margin:20px 0 47px 0;
  font-size: 14px;
  color: #323C4F;
}
</style>
  